<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>李四页面</title>
</head>
<style>
    .right {
        margin-left: 200px;
    }

    .left {
        margin-left: 100px;
    }
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layim/dist/css/layui.css">

<body>
<script src="${pageContext.request.contextPath}/static/layim/dist/layui.js"></script>
<%-- Welcome<br/><input id="text" type="text"/>
 <button onclick="send()">发送消息</button>
 <hr/>
 <button onclick="closeWebSocket()">关闭WebSocket连接</button>
 <hr/>
 <div id="message"></div>--%>
</body>

<%-- <script type="text/javascript">
         var websocket = null;
         //判断当前浏览器是否支持WebSocket
         if ('WebSocket' in window) {
                 websocket = new WebSocket("ws://localhost:8080/websocket");
             }
         else {
                 alert('当前浏览器 Not support websocket')
             }
    
         //连接发生错误的回调方法
         websocket.onerror = function () {
                 setMessageInnerHTML("WebSocket连接发生错误");
             };

         //连接成功建立的回调方法
         websocket.onopen = function () {
                 setMessageInnerHTML("");
             }
    
         //接收到消息的回调方法
         websocket.onmessage = function (event) {
                 setMessageInnerHTML(event.data);
             }

         //连接关闭的回调方法
         websocket.onclose = function () {
                 setMessageInnerHTML("WebSocket连接关闭");
             }
    
         //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
         window.onbeforeunload = function () {
                 closeWebSocket();
             }
    
         //将消息显示在网页上
         function setMessageInnerHTML(innerHTML) {

             if (innerHTML==""){
                 $("#message").append("请提问"+'<br/>');
                 /*document.getElementById('message').innerHTML += "请提问"+'<br/>';*/
             }else{

                 if (innerHTML.substring(0,3)=="求职者"){

                     $("#message").append("<span class=\"right\">"+innerHTML+"</span>"+"<br/>");
                 }else if(innerHTML.substring(0,3)=="招聘者"){

                     $("#message").append("<span class=\"left\">"+innerHTML+"</span>"+"<br/>");
                 }

                 /*document.getElementById('message').innerHTML += innerHTML + '<br/>';*/
             }
             }
    
         //关闭WebSocket连接
         function closeWebSocket() {
                websocket.close();
             }
   
         //发送消息
      function send() {
               var message = document.getElementById('text').value;
             websocket.send("求职者："+message);
       }
   </script>--%>
<script>
    console.log("接收者："+"${param.accountName}");
    layui.use('layim', function (layim) {
        var copyLayim = layim;
        var websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8080/websocket");
        } else {
            alert('当前浏览器 Not support websocket')
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
        };
        //连接成功建立的回调方法
        websocket.onopen = function () {
        };
        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            var data = event.data;//服务器返回的消息，前端页面可以根据不同的消息做不同的操作。
            console.log("老板接收到的消息:" + JSON.parse(data).content);
            console.log("老板接收到的用户:" + JSON.parse(data).username);
            if (JSON.parse(data).username != "${sessionScope.accountMap.accountName}") {
                console.log("老板进入接收");
                console.log("老板进入接收的数据："+JSON.parse(data));

                layim.getMessage(JSON.parse(data)); //res.data即你发送消息传递的数据（阅读：监听发送的消息
            }
        };
        //连接关闭的回调方法
        websocket.onclose = function () {
            //    setMessageInnerHTML("WebSocket连接关闭");
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            closeWebSocket();
        };

        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            //    document.getElementById('message').innerHTML += innerHTML + '<br/>';
        };

        //关闭WebSocket连接
        function closeWebSocket() {
            websocket.close();
        };

        //发送消息
        function send(msg) {
            websocket.send(msg);
        };

        layim.config({
            /*brief: false, //是否简约模式（如果true则不显示主面板）
            init: {
                url: 'layui/json/getList.json'
                ,data: {'userId': 1}
            },
            members: {
                url: 'layui/json/getMembers.json'
            },
            uploadImage: {
                url: '/upload/image'
            } ,*/
            //chatLog:  '跳转至聊天界面url'
            notice:true,
            isfriend:true,
            chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html',
            init: {
                mine: {
                    "username": "${sessionScope.accountMap.accountName}" //我的昵称
                    , "id":"222" //我的ID
                    , "status": "online" //在线状态 online：在线、hide：隐身
                    , "remark": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
                    , "avatar": "${pageContext.request.contextPath}/static/layui/images/1.jpg" //我的头像
                },
                /*to :{
                    "username": "王五" //我的昵称
                    , "id": 111 //我的ID
                    , "status": "online" //在线状态 online：在线、hide：隐身
                    , "remark": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
                    , "avatar": "layui/images/user1.png" //我的头像
                }*/
            },
            brief: true//是否简约模式（如果true则不显示主面板）
        }).chat({
            name: "${param.accountName}"
            , type: 'friend'
            , avatar: '${pageContext.request.contextPath}/static/layui/images/user1.png'
            , id: "111"
        });

        /**/

        //layim消息发送监听器
        layim.on('sendMessage', function (res) {
            var mine = res.mine; //包含我发送的消息及我的信息
            var to = res.to; //对方的信息
            var msg = {
                id: mine.id,
                avatar: "${pageContext.request.contextPath}/static/layui/images/1.jpg",
                username:mine.username,
                type: "friend",
                content: mine.content
            };
            console.log(res);
            console.log(mine);
            console.log(to);
            console.log(to.id);
            send(JSON.stringify(msg));
        });

        //监听修改签名

    });
</script>
</html>
